/* eslint-disable */
<template>
    <div class="answer " style="min-height: 350px;">
        <div class=" position-absolute left right overflow-auto px-4" style="top: 65px; bottom: 15px;">
            <el-card shadow="never" class=" mb-4">
                <ul>
                    <li class=" pb-3 border-bottom border-light-1 mb-3" v-for="o in 3">
                        <div class="row mx-0 ">
                            <div class="col-auto d-flex align-items-center pl-0">
                                <h2 class=" din_alternatebold mb-0 text-din-data" >01</h2>
                            </div>
                            <div class="col px-0">
                                <p class="mb-0 small font-weight-bold">这是一个互动问题的标题这是一个互动问题的标题 <el-tag type="success" size="mini" class="small" >正确答案：A</el-tag></p>
                                <small class=" text-secondary">这里是互动问题的描述说明这里是互动问题的描述是互动问题的描述说明</small>
                            </div>
                            <div class="col-auto px-1 d-flex align-items-center pl-0">
                                <el-tooltip class="item" effect="dark" content="选择当前话题" placement="top">
                                    <el-button type="success" size="mini" icon="el-icon-check" plain   circle></el-button>
                                </el-tooltip>
                            </div> 
                            <div class="col-auto px-1 d-flex align-items-center pl-0">
                                <el-tooltip class="item" effect="dark" content="编辑话题" placement="top">
                                    <el-button  size="mini" icon="el-icon-edit" plain   circle></el-button>
                                </el-tooltip>
                            </div>
                            <div class="col-auto px-1 d-flex align-items-center pl-0">
                                <el-tooltip class="item" effect="dark" content="删除话题" placement="top">
                                <el-button type="danger" size="mini" icon="el-icon-delete" plain  circle></el-button>
                            </el-tooltip>
                            </div>
                        </div>
                    </li> 
                </ul>
                <el-button  class="w-100  border-dashed">创建一个互动问题</el-button>
            </el-card>
            <el-divider class=""></el-divider>
            <!--创建或编辑一个互动问题-->
            <el-card shadow="never" :body-style="{ padding: '0px' }" class="py-3 mb-5 d-none">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="标题" class="mb-2 pr-3">
                        <el-input v-model="form.answerTitle"></el-input>
                    </el-form-item>

                    <el-form-item label="描述" class="mb-2 pr-3">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.textarea"></el-input>
                    </el-form-item>

                    <el-form-item label="答案形式"" class=" mb-0">
                        <div class=" pt-1">
                            <el-radio v-model="radio" label="1">文本内容</el-radio>
                            <el-radio v-model="radio" label="2">图像卡（450x450）</el-radio>
                        </div>

                    </el-form-item>

                    <el-divider class="border-light-1 mt-0 mb-2"></el-divider>
                    <el-form-item label="A" class="mb-2 pr-3">
                        <div class="row "> 
                            <div class="col pr-0">
                            <el-upload class="upload-demo " action="https://jsonplaceholder.typicode.com/posts/" multiple
                                :limit="3" :file-list="fileList"> 
                                    <el-button size="mini" class="  mt-1">上传图像卡</el-button> 
                                    <div slot="tip" class="el-upload__tip "></div>
                            </el-upload>
                            </div>
                            <div class="col-auto pl-2 ">
                                <el-checkbox v-model="checked" >
                                    <span class="small"> 正确答案 </span>
                                </el-checkbox>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="B" class="mb-2  pr-3">
                        <div class="row "> 
                            <div class="col pr-0">
                            <el-upload class="upload-demo " action="https://jsonplaceholder.typicode.com/posts/" multiple
                                :limit="3" :file-list="fileList"> 
                                    <el-button size="mini" class="  mt-1">上传图像卡</el-button> 
                                    <div slot="tip" class="el-upload__tip "></div>
                            </el-upload>
                            </div>
                            <div class="col-auto pl-2 ">
                                <el-checkbox v-model="checked" >
                                    <span class="small"> 正确答案 </span>
                                </el-checkbox>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="C" class="mb-2  pr-3">
                        <div class="row "> 
                            <div class="col pr-0">
                            <el-upload class="upload-demo " action="https://jsonplaceholder.typicode.com/posts/" multiple
                                :limit="3" :file-list="fileList"> 
                                    <el-button size="mini" class="  mt-1">上传图像卡</el-button> 
                                    <div slot="tip" class="el-upload__tip "></div>
                            </el-upload>
                            </div>
                            <div class="col-auto pl-2 ">
                                <el-checkbox v-model="checked" >
                                    <span class="small"> 正确答案 </span>
                                </el-checkbox>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="D" class="mb-2  pr-3">
                        <div class="row "> 
                            <div class="col pr-0">
                            <el-upload class="upload-demo " action="https://jsonplaceholder.typicode.com/posts/" multiple
                                :limit="3" :file-list="fileList"> 
                                    <el-button size="mini" class="  mt-1">上传图像卡</el-button> 
                                    <div slot="tip" class="el-upload__tip "></div>
                            </el-upload>
                            </div>
                            <div class="col-auto pl-2 ">
                                <el-checkbox v-model="checked" >
                                    <span class="small"> 正确答案 </span>
                                </el-checkbox>
                            </div>
                        </div>
                    </el-form-item>

                    <el-divider class="border-light-1 mt-0 mb-2"></el-divider>
                    <div class="px-3">
                        <el-button class="w-100  mt-1 border-dashed" icon=" el-icon-plus"> 增加一个选项</el-button>
                        <el-button class="w-100  mt-2 mx-0" type="primary" icon=" el-icon-check"> 保存提交</el-button>
                    </div>

                </el-form>
            </el-card> 
        </div>  
    </div>
</template>

<script>
    export default {
        name: 'Answer',
        data() {
            return {
                radio: '2',
                imageUrl: '', // 上传头像图片
                form: {
                    answerTitle: '',
                    textarea: '',
                },

            }
        }

    }
</script>

<style>

</style>